import { React, useEffect, useState, memo } from 'react'
import { Card, Descriptions } from 'antd'
//import { Chart } from '@antv/g2'
import { ipList as presentIp } from '../../ipConfig'

function SelectedHotelsNumber({ selectedTags }) {
  const [data, setData] = useState({
    hotelNum: 0,
    rentHotelNum: 0,
    rentHotelRoomNum: 0,
    hotelNumChange: [],
  })

  useEffect(() => {
    const hotellistId = []
    selectedTags.map((item) => {
      hotellistId.push(item.hotelId)
      return item
    })
    if (hotellistId.length === 0) {
      hotellistId.push(-1)
    }

    let url = `${presentIp.DEV_IP}/hotel_data?hotellist=${hotellistId}`
    fetch(url, {
      headers: {
        token: sessionStorage.getItem('token'),
      },
    })
      .then((response) => {
        return response.json()
      })
      .then((json) => {
        setData(json.data)
      })
  }, [selectedTags])
  /*
    useEffect(() => {
  
      if (data) {
        document.getElementById('selectedHotelsNumber').innerHTML = ""
        draw(data.hotelNumChange)
      }
    }, [data])*/
  /* const draw = (drawData) => {
    const chart = new Chart({
      container: 'selectedHotelsNumber',
      width: 260,
      height: 80,
    })
    chart.axis(false)
    chart.data(drawData)
    chart.scale('weekIncrease', {
      nice: true,
      range: [0.1, 0.9],
      alias: '酒店增量'
    })
    chart.scale('week', {
      range: [0.1, 0.9]
    })

    chart.tooltip({
      showMarkers: false
    })
    chart.interaction('active-region')

    chart.interval().position('week*weekIncrease')

    chart.render()
  } */

  return (
    <>
      <Card
        title="酒店总数"
        bordered={false}
        size="small"
        style={{
          width: '100%',
          height: '100%',
          padding: 0,
        }}
        headStyle={{
          height: '20%',
        }}
        bodyStyle={{
          height: '80%',
        }}>
        <div
          style={{
            display: 'flex',
            flexDirection: 'column',
            height: '100%',
          }}>
          <div
            style={{
              height: '50%',
            }}>
            <Descriptions column={2}>
              <Descriptions.Item label="合同期内">
                {data.rentHotelNum}
              </Descriptions.Item>
              <Descriptions.Item label="对应房间数">
                {data.hotelRoomNum}
              </Descriptions.Item>
              <Descriptions.Item label="项目总数">
                {data.hotelNum}
              </Descriptions.Item>
            </Descriptions>
          </div>
          <div
            id="selectedHotelsNumber"
            style={{
              height: '50%',
              display: 'flex',
            }}></div>
        </div>
      </Card>
    </>
  )
}

export default memo(SelectedHotelsNumber)
